<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>路由:编程导航</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
  <router-link to="/">index</router-link>
  <router-link to="/list">list</router-link>
  <router-link to="/detail">detail</router-link>

  <router-view></router-view>
  <button @click="change">导航</button>
</div>


<script>
  var router = new VueRouter({
    routes:[
      {
        path:'/',
        component:{
          template:`
                            <div>
                                 index
                            </div>
                        `
        }
      },
      {
        path:'/list',
        component:{
          template:`
                            <div>
                                 list
                            </div>
                        `
        }
      },
      {
        path:'/detail',
        component:{
          template:`
                            <div>
                                 detail
                            </div>
                        `
        }
      }
    ]
  })

  var app = new Vue({
    el:'#app',
    router:router,
    methods:{
      change:function(){
        console.log('xxxxxxxxxxxxx'+this.$route.path);

        this.$router.push('/list')
      }
    }
  })
</script>
</body>
</html>

